You can use the :hover pseudo-class on a parent element and combine it with descendant selectors to style both the parent and its child elements simultaneously when the parent is hovered over.

How It Works

1
Apply :hover to the parent element.
2
Use a descendant selector to target child elements inside the hovered parent.
3
This ensures that both the parent and its children change styles when the parent is hovered.

Example: Styling Parent and Child on Hover

In this example, when you hover over the .card element, its background changes to light blue and the .child paragraph inside it changes color and becomes bold.

Best Practices

1
Use hover effects to provide interactive visual feedback without affecting accessibility.
2
Ensure that color changes meet contrast requirements for readability.
3
Combine with transitions for smooth hover effects (e.g., transition: all 0.3s;).
4
Test hover interactions on devices that support pointer events; consider touch devices separately.

Difficulty: 3/10

Topics: hover pseudo-class, child selector, CSS specificity

Scenario Questions

0-2 years experience

1
How would you make the text inside a button turn red when someone hovers over the button itself?
2
What happens if you use .parent:hover .child instead of .parent:hover > .child — and when would that matter?

2-5 years experience

1
A dropdown menu’s items aren’t changing color on hover even though the parent li has :hover — what’s the most likely cause and how would you fix it?
2
We added a hover effect to a card component, but now nested buttons inside it are inheriting the hover styles unexpectedly — how do you isolate the styling to just the card’s background?

5-8 years experience

1
We have a reusable card component used across 12 teams — how do you design the hover styling for child elements so it’s predictable, maintainable, and doesn’t break when nested in unexpected contexts?
2
A legacy hover rule is causing performance jank on mobile when hovering over a list with 50+ items — how would you diagnose and optimize this without removing the visual effect?

8+ years experience

1
Our design system has 30+ components that use nested hover effects — how do you architect the CSS architecture to prevent specificity wars and ensure consistent behavior across teams without relying on !important?
2
We’re migrating from a legacy CSS framework to a modern CSS-in-JS system — how do you preserve hover-on-child behavior while avoiding style leakage and ensuring scalability across micro-frontends?

Follow-up Questions

❓What if the child element has its own hover state — how do you handle that?
❓How would you debug if the child isn’t styling on hover even though the selector looks right?
❓Why might you choose > over a space-separated selector here?